SE<template>
  <div class="production-management">
    <page>
      <div slot="body">
        <div style="margin-bottom:  10px;">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd"> 添加 </el-button>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="序号" type="index" width="50px"></el-table-column>
          <!-- <el-table-column label="生产编号" prop="taskCode"></el-table-column> -->
          <el-table-column label="产品类型" prop='type'></el-table-column>
          <el-table-column label="生产批次号" prop="batchCode"></el-table-column>
          <el-table-column label="弦长" prop="arcLength"></el-table-column>
          <el-table-column label="弦高" prop="height"></el-table-column>
          <el-table-column label="半径" prop="radius"></el-table-column>
          <el-table-column label="工字钢规格" prop="steel"></el-table-column>
          <el-table-column label="生产数量" align="center" prop="finishNum"/>
          <el-table-column label="生产时间" align="center" prop="madeDate" width="180" />
          <el-table-column label="操作员" prop="operator"></el-table-column>
          <!-- <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleEdit(scope.row)" :underline="false">编辑</el-link>
              <el-link type="primary" @click="handleDelete(scope.row)" :underline="false">删除</el-link>
            </template>
          </el-table-column> -->
        </el-table>
        <div style="width: 100%; display: flex; justify-content: end; margin-top: 10px">
          <el-pagination :background="true" :current-page="formInline.pageNo" :page-size="formInline.pageSize"
            :page-sizes="[10, 20, 30, 40]" :total="formInline.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <el-dialog :title="prodTitle" :close-on-click-modal="false" :visible.sync="openEdProd" width="800px"
        append-to-body>
        <el-form ref="prodForm" :model="prodForm" :rules="prodRules" label-width="160px">

          <el-table :data="tableData1" @selection-change="handleSelectionChange" ref="multipleTable" border>
            <el-table-column label="序号" type="index" width="50px"></el-table-column>
            <el-table-column label="产品型号" prop="prodCode"></el-table-column>
            <el-table-column label="生产批次号" prop="batchCode"></el-table-column>
            <el-table-column label="弦长" prop="arcLength"></el-table-column>
            <el-table-column label="弦高" prop="height"></el-table-column>
            <el-table-column label="半径" prop="radius"></el-table-column>
            <el-table-column label="工字钢规格" prop="steel"></el-table-column>
            <el-table-column align="center" type="selection"></el-table-column>

          </el-table>
          <el-form-item class="dialog-label1" label="生产批次号：" prop="batchCode">
            <el-input style="width: 220px;" v-model="prodForm.batchCode" placeholder="请输入生产批次号" />
          </el-form-item>
          <el-form-item class="dialog-label1" label="产量：" prop="tunnel1">
            <el-input style="width: 220px;" v-model="prodForm.tunnel1" placeholder="录入" />
          </el-form-item>
          <el-form-item label="生产时间：" prop="date">
            <el-date-picker v-model="dateRange" type="date" value-format="yyyy-MM-dd"
              placeholder="生产时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="操作员：" prop="unit">
            <el-input style="width: 220px;" v-model="prodForm.opeator" placeholder="请输入操作员" />
            <!-- <el-select v-model="prodForm.unit" placeholder="请选择操作员">
              <el-option v-for="dict in unitList" :key="dict.id" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitProdFormEdite">确 定</el-button>
          <el-button @click="cancelEdite">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="prodTitle" :close-on-click-modal="false" :visible.sync="openProd" width="800px" append-to-body>
        <el-form ref="prodForm" :model="prodForm" :rules="prodRules" label-width="160px">

          <el-table :data="tableData1" @selection-change="handleSelectionChange" ref="multipleTable" border>
            <el-table-column label="序号" type="index" width="50px"></el-table-column>
            <el-table-column label="产品型号" prop="prodCode"></el-table-column>
            <el-table-column label="弦长" prop="arcLength"></el-table-column>
            <el-table-column label="弦高" prop="height"></el-table-column>
            <el-table-column label="半径" prop="radius"></el-table-column>
            <el-table-column label="工字钢规格" prop="steel"></el-table-column>
            <el-table-column align="center" type="selection"></el-table-column>

          </el-table>
          <el-form-item class="dialog-label1" label="生产批次号：" prop="batchCode">
            <el-input style="width: 220px;" v-model="prodForm.batchCode" placeholder="请输入生产批次号" />
          </el-form-item>
          <el-form-item class="dialog-label1" label="产量：" prop="tunnel1">
            <el-input style="width: 220px;" v-model="prodForm.tunnel1" placeholder="录入" />
          </el-form-item>
          <el-form-item label="生产时间：" prop="dateRange">
            <el-date-picker v-model="dateRange" type="date" value-format="yyyy-MM-dd"
              placeholder="生产时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="操作员：" prop="opeator">
            <!-- <el-select v-model="prodForm.unit" placeholder="请选择操作员">
              <el-option v-for="dict in unitList" :key="dict.id" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select> -->
            <el-input style="width: 220px;" v-model="prodForm.operator" placeholder="请输入操作员" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitProdForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </page>
  </div>
</template>

<script>
// 钢拱架生产记录
import { getProdPlan, addProdPlan, getList, getDicts, updateProd, deleteProd, getprolist } from '@/api/product';
import { getRecordList, addRecordNew } from '@/api/records';
import { getToken } from '@/utils/auth';
import pageQuery from '../../mixins/pageQuery';
export default {
  mixins: [pageQuery],
  data() {
    return {
      formInline:{
        pageNo:1,
        pageSize:10
      },
      multipleSelection: [], // 多选存储数据
      checkedSelection: {}, // 单选存储数据
      form: {
        prodNum: '',
        finishDate: '',
        id: '',
      },
      pageVO: {
        pageNum: 0
      },
      dateRange: '',
      list1: [],
      value1: 'ggj',
      prodForm: {},
      open: false,
      openProd: false,
      total: '',
      time: '',
      title: '',
      prodTitle: '',
      tableData: [],
      tableData1: [],
      areaList: [],
      statusOptions: [],
      unitList: [],
      num: 0,
      rules: {
      },
      prodRules: {
        batchCode:[
          { required: true, message: '生产批次号不能为空', trigger: 'blur' }
        ]
      },
      uploadFileUrl: process.env.VUE_APP_BASE_API + '/steel-arch/client/file/upload', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      fileList: [],
      openEdProd:false,
      submitProdFormEdite:false
    };
  },
  created() {
    // this.getprolist()
    this.getTableData();
    const { projectId } = this.$store.getters;
    this.prodForm.projectId = projectId;
    getDicts({ dictType: 'sys_tunnel_area' }).then(res => {
      this.statusOptions = res.data.data;
    });
    getDicts({ dictType: 'sys_prod_unit' }).then(res => {
      this.unitList = res.data.data;
    });
  },
  methods: {

    //分页 每页显示条数发生变化
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getTableData();
    },
    //分页 当前页发生变化
    handleCurrentChange(val) {
      this.formInline.pageNo = val;
      this.getTableData();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {

      // 单选
      if (val.length == 1) {
        let item = val[val.length - 1];
        this.checkedSelection = JSON.parse(JSON.stringify(item));
      }

      // 单选选中多条时，需要清空所选数据
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection(); // 清空选项
        this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据
      }

      // 取消选中
      if (val.length == 0) {
        this.checkedSelection = {};
      }
    },
    getprolist() {
      const { projectId } = this.$store.getters;
      const parmas = {
        projectId: projectId,
        prodType: 'ggj',
      };
      getList(parmas).then(res => {
        this.tableData1 = res.data;
      });
    },
    radioInput(e) {
      this.getTableData()
    },
    getTableData() {
      const { projectId } = this.$store.getters;
      const parmas = {
        projectId: projectId,
        prodType: 'ggj',
        pageNo:this.formInline.pageNo,
        pageSize:this.formInline.pageSize,
      };
      getRecordList(parmas).then(res => {
        res.data.data.map((item) => {
          item.type = '钢拱架'
        })
        this.tableData = res.data.data;
        console.log(this.tableData)
        this.formInline.total = res.data.total;
        this.formInline.pageNo = res.data.pageNo;
        this.formInline.pageSize = res.data.pageSize;
        this.formInline.pageTotal = res.data.pageTotal;
      });
    },
    edit(num) {
      this.open = true;
      if (num == 1) {
        this.title = '设计总需求量修改';
        this.num = 1;
      } else {
        this.title = '设计完成时间修改';
        this.num = 2;
      }
    },
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const { projectId } = this.$store.getters;
          this.form.projectId = projectId;
          addProdPlan(this.form).then(response => {
            this.$message.success('修改成功');
            this.open = false;
            // this.getplan();
            this.getTableData();
          });
        }
      });
    },
    submitProdForm: function () {
      if (!this.checkedSelection) {
        return this.$message.success('请选择类型');
      }
      console.log('--------------')
      console.log(this.unitList)
      let data = this.checkedSelection
      data.finishNum = this.prodForm.tunnel1
      data.batchCode = this.prodForm.batchCode
      // data.createTime = this.dateRange[0] + '  08:00:00';
      data.madeDate = this.dateRange + ' 08:00:00';
      data.operator = this.prodForm.operator;
      // data.operator = this.unitList[this.prodForm.unit - 1].dictLabel;
      data.prodId = data.id
      data.taskCode = ''
      addRecordNew(data).then(response => {
        if (response.success) {
          this.open = false;
          this.openProd = false;
          this.getTableData();
        }
      });
    },
    cancelEdite() {
      this.open = false;
      this.$refs.prodForm.resetFields();
      this.openProdEd = false;
    },
    cancel() {
      this.open = false;
      this.$refs.prodForm.resetFields();
      this.openProd = false;
    },
    handleAdd() {
      this.openProd = true;
      this.prodTitle = '添加记录';
      this.prodForm = {}
      this.dateRange=''
      this.getprolist();
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`只允许上传单个文件`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error('上传失败, 请重试');
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success('上传成功');
      this.prodForm.image = res.data;
    },
    // 删除文件
    handleDelete(index) {
      //this.fileList.splice(index, 1);
    },
    handleEdit(row) {
      this.openEdProd = true;
      this.prodForm = row;
      const { projectId } = this.$store.getters;
      this.prodForm.projectId = projectId;

    },
    handleDelete(row) {
      this.$confirm('是否确认删除产品ID为"' + row.prodCode + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return deleteProd(row.id);
        })
        .then(() => {
          this.getTableData();
          this.$message.success('删除成功');
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
}

.line {
  width: 8px;
  background: #1890ff;
  margin-right: 15px;
}

.form {
  display: flex;
  margin-top: 10px;

  ::v-deep {
    .el-form-item__label {
      font-weight: normal;
    }
  }
}

.form-item {
  position: relative;
}

.el-icon-edit {
  font-size: 20px;
  right: 10px;
  position: absolute;
  top: 8px;
}

.dialog-label1 {
  margin-top: 20px;
  text-align: left;
}
</style>